<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>
<style>
    html,
    #app,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>
<body>
<div id="app">
    <el-container style="height:100%">
        <el-dialog title="请选择SPU" :visible.sync="dialogFormVisible" style="width:100%" :fullscreen="true">
            <el-input v-on:input="inputFuncSpu" v-model="SPU.keySearch" placeholder="请输入搜索内容" style="width:50%">
                <el-button slot="append" icon="el-icon-search" @click=spuSearch></el-button>
            </el-input>
            <#--<div style="height: calc(100vh - 300px)">-->
                <el-table ref="SPU.multipleTable" :data="SPU.tableData" tooltip-effect="dark" style="width: 100%"
                          @selection-change="handleSelectionChange" :render-header="labelHead" size="mini" tooltip-effect="dark" border>
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column v-if="hide" prop="spu_id" label="SPUID">
                    </el-table-column>
                    <el-table-column prop="spu_code" label="SPU编码" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="spu_name" label="SPU名称" :show-overflow-tooltip=true>
                    </el-table-column>
                    <#--<el-table-column prop="spu_brand" label="品牌" :show-overflow-tooltip=true>-->
                    <#--</el-table-column>-->
                    <#--<el-table-column prop="spu_unit" label="单位" :show-overflow-tooltip=true>-->
                    <#--</el-table-column>-->
                    <#--<el-table-column prop="spu_model" label="系列/型号" :show-overflow-tooltip=true>-->
                    <#--</el-table-column>-->
                    <#--<el-table-column prop="spu_spec_name_set" label="规格" :show-overflow-tooltip=true>-->
                    <#--</el-table-column>-->
                </el-table>
            <#--</div>-->
            <el-pagination @size-change="SPUSizeChange" @current-change="spuCurrentPage" :current-page.sync="SPU.page"
                           :current-page="SPU.page" :page-sizes="[100, 500, 1000]" :page-size="SPU.limit"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="SPU.total">
            </el-pagination>
            <el-row>
                <#--<el-form-item>-->
                    <el-button type="primary" @click="checkOK">确 定</el-button>
                    <el-button @click="checkCancel">取 消</el-button>
                <#--</el-form-item>-->
            </el-row>
            <#--<div slot="footer" class="dialog-footer">-->
                <#--<el-button type="primary" @click="checkOK">确 定</el-button>-->
                <#--<el-button @click="checkCancel">取 消</el-button>-->
            <#--</div>-->
        </el-dialog>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">数据中心</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类库</el-breadcrumb-item>
                <el-breadcrumb-item>SPU上下架管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside style="background-color: rgb(238, 241, 246);min-width: 25%">
                <el-header style="text-align: left; font-size: 15px;height: 30px">
                    <span>商品分类</span>
                </el-header>
                <el-scrollbar style="height:calc(100% - 30px)">
                    <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false"
                             :highlight-current="true">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <el-button type="text" size="mini" @click="getSPUItem(data,node)">
                                    <span style="color:#606266;font-size: 14px"></i>{{
                                        node.label }}</span>
                                </el-button>
                            </span>
                    </el-tree>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <div style="height:90%;width:100%">
                    <el-button type="primary" @click=importSku>上架</el-button>
                    <el-table :data="SPUItem" stripe style="width: 100%" ref="multipleTable" height="100%" :render-header="labelHead" size="mini" tooltip-effect="dark" border>
                        <el-table-column v-if="hide" prop="spuId" label="spuID" width="50px">
                        </el-table-column>
                        <el-table-column prop="spu_code" label="SPU编号" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="spu_name" label="SPU名称" :show-overflow-tooltip=true>
                        </el-table-column>
                        <#--<el-table-column prop="brand_name" label="品牌" :show-overflow-tooltip=true>-->
                        <#--</el-table-column>-->
                        <#--<el-table-column prop="spu_model" label="规格" :show-overflow-tooltip=true>-->
                        <#--</el-table-column>-->
                        <el-table-column fixed="right" label="操作" min-width="100px">
                            <template slot-scope="scope">
                                <el-button @click="detail(scope.row.spu_code)" type="text">查看</el-button>
                                <el-button @click="turnOff(scope.row.spuId,scope.row.spu_code,scope.row.spu_name)" type="text">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="SPUhandleSizeChange" @current-change="SPUhandleCurrentChange"
                                   :page-sizes="[100, 500, 1000]" :page-size="SPUPagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="SPUTotal">
                    </el-pagination>
                </div>
            </el-container>
        </el-container>
        <!-- 查看模态框 -->
        <el-dialog title="SPU详细信息" :visible.sync="dialogTableVisible">
            <!-- 动态尺寸固定调法 -->
            <!-- 调整方法1：当父级尺寸是固定的时候，同级尺寸是固定的时候，动态的部分用计算属性calc( 100% - px ) -->
            <!-- 调整方法2：当同级尺寸是固定的时候，动态部分以全屏为参照单位vh - viewport height，直接将本级尺寸设为vh -px -->
            <!-- 调整方法2：当父级尺寸是变动的时候，应当以全屏为参照单位vh - viewport height，直接将本级尺寸设为vh -->
            <!-- 调整方法3：当父级尺寸是变动的时候，应当以全屏为参照单位vh - viewport height，将父级尺寸动态固定，然后动态的部分用计算属性calc( 100% - px ) -->
            <div style="height: calc(50vh - 32px);overflow: scroll;">
                <el-table :data="SKUItem.slice((SKUPage-1)*SKUPagesize,SKUPage*SKUPagesize)" highlight-current-row
                          @row-click="handleCurrentChange" :render-header="labelHead" size="mini" tooltip-effect="dark" border>

                    <el-table-column prop="sku_name" label="材料名称" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_brand" label="品牌" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_unit" label="单位" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_model" label="型号" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_slug_set" label="规格参数" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_cost_price" label="成本价格" :show-overflow-tooltip=true>
                    </el-table-column>
                    <el-table-column prop="sku_official_price" label="官方价格" :show-overflow-tooltip=true>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination @size-change="SKUhandleSizeChange" @current-change="SKUhandleCurrentChange"
                           :current-page="SKUPage"
                           :page-sizes="[100, 500, 1000]" :page-size="SKUPagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="SKUItem.length">
            </el-pagination>
        </el-dialog>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script >
    new Vue({
        el: '#app',
        data() {
            return {
                // 分类的基础数据
                treeData: [],
                treeId: null,

                // SPU数据
                SPUItem: [],
                SPUPagesize: 100,
                SPUPage: 1,
                SPUTotal: 0,


                // 模态框
                dialogTableVisible: false,
                SKUItem: [],
                SKUPagesize: 100,
                SKUPage: 1,

                dialogFormVisible: false,
                SPU: {
                    spuList: [],
                    page: 1,
                    limit: 100,
                    total: null,
                    keySearch: '',
                    multipleSelection: [],
                    tableData: [],
                    spuCode: '',
                },
                hide: false,
            }
        },
        async mounted() {
            // 自动获取分类数据
            var treeData = this.treeData;
            var boolean = false;
            $.ajax({
                url: '${url}/pzCfgCataLogController/pzCfgCataLogTree.json',
                type: 'get',
                async: false,
                success: function (result) {
                    boolean=result.ret;
                    if (boolean) {
                        treeData = result.data;
                    }
                }
            });
            if(boolean){
                this.treeData = treeData;
                this.ajaxFunction();
            }else{
                this.$message.error('请求异常');
            }
        },
        methods: {
            labelHead(h, { column, index }) {
                let l = column.label.length
                let f = 16 //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
                column.minWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
                //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
                return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label])

            },
            //上架
            importSku() {
                if (this.treeId) {
                    this.dialogFormVisible = true;
                    this.getSpuList();
                } else {
                    this.$message.error('请选择分类');
                }

            },
            //鼠标监听input框事件
            inputFuncSpu($event) {
                this.keySearch = $event;
                this.getSpuList();
            },
            //点击事件获取输入内容
            spuSearch() {
                this.getSpuList();
            },
            checkOK() {
                this.dialogFormVisible = false;
                var spuIdList = [];
                this.SPU.multipleSelection.forEach(function (ele) {
                    spuIdList.push(ele.spu_id);
                });
                var treeId = this.treeId;
                var boolean = false;
                var msg = '';
                $.ajax({
                    url: "${url}/spuCatalogRelateConntroller/relateAddData.json",
                    type: "GET",
                    data: {
                        id: treeId,
                        beChecked: spuIdList.toString()
                    },
                    async: false,
                    success: function (result) {
                        boolean = result.ret;
                        if (!boolean) {
                            msg = result.msg;
                        }
                    }
                });
                if (boolean) {
                    this.$message({
                        type: 'success',
                        message: '绑定成功',
                        duration: 6000
                    });
                    ;
                    this.ajaxFunction();
                } else {
                    this.$message.error(msg);
                }
            },
            checkCancel() {
                this.dialogFormVisible = false;
                this.SPU.multipleSelection = [];
            },
            spuCurrentPage(val) {
                this.SPU.page = val;
                this.getSpuList();
            },
            SPUSizeChange(val) {
                this.SPU.limit = val;
                this.getSpuList();
            },
            handleSelectionChange(val) {
                this.SPU.multipleSelection = val;
            },
            getSpuList() {
                var page = this.SPU.page;
                var limit = this.SPU.limit;
                var key = this.SPU.keySearch;
                var total = 0;
                var spuList = [];
                var boolean = false;
                $.ajax({
                    url: "${url}/spu/list.json?page=" + page + "&limit=" + limit +
                    "&key=" + key,
                    type: "GET",
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        boolean=data.ret;
                        if (boolean) {
                            spuList = data.data;
                            total = data.count;
                        }
                    }
                });
                if(boolean){
                    this.SPU.total = total;
                    this.SPU.tableData = spuList;
                }else{
                    this.$message.error('请求异常');
                }

            },
            turnOff(spuId,spu_code,spu_name) {
                //下架请求
                this.$confirm('此操作将下架该SPU, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var boolean = true;
                    $.ajax({
                        url: "${url}/spuCatalogRelateConntroller/relateDel.json?id=" + spuId,
                        type: "GET",
                        async: false,
                        success: function (data) {
                            boolean = data.ret;
                            if (!boolean) {
                                msg = result.msg;
                            }
                        }
                    });
                    if (boolean) {
                        this.$message({
                            type: 'success',
                            message: '下架成功',
                            duration: 6000
                        });
                        var message_body={spu_code:spu_code,spu_name:spu_name};
                        $.ajax({
                            url: "/message/in/insert.json",
                            type: "POST",
                            async: false,
                            data: {message_body:JSON.stringify(message_body),message_type:"msg011",message_no:spu_code,message_status:"99"},
                            success: function (result) {
                            }
                        });
                        this.ajaxFunction();
                    } else {
                        this.$message.error(msg);
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下架!'
                    });
                });
            },
            async getSPUItem(data) {
                this.treeId = data.id;
                this.ajaxFunction();

            },

            async SPUhandleSizeChange(val) {
                this.SPUPagesize = val;
                this.ajaxFunction();
            },
            async SPUhandleCurrentChange(val) {
                this.SPUPage = val;
                this.ajaxFunction();
            },
            async detail(spu_code) {
                this.dialogTableVisible = true;
                var boolean = false;
                var SPU=[];
                $.ajax({
                    url: '${url}/sku/getSkuListBySpuCode.json?spuCode=' + spu_code,
                    type: 'get',
                    async: false,
                    success: function (result) {
                        boolean = result.ret;
                        if(boolean){
                            SPU = result.data;
                        }
                    }
                });
                if (boolean) {
                    this.SKUItem = SPU;
                }else{
                    this.$message.error('请求异常');
                }
            },
            async SKUhandleSizeChange(val) {
                // 更新
                this.SKUPagesize = val;
            },
            handleCurrentChange(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            async SKUhandleCurrentChange(val) {
                this.SKUPage = val;
            },
            ajaxFunction() {
                var treeId = this.treeId;
                var SPUPage = this.SPUPage;
                var SPUPagesize = this.SPUPagesize;
                var SPUItem = this.SPUItem;
                var SPUTotal = this.SPUTotal;
                var boolean = false;
                $.ajax({
                    url: '${url}/spuCatalogRelateConntroller/getAllRelate.json',
                    type: 'post',
                    data: {
                        param: treeId,
                        page: SPUPage,
                        limit: SPUPagesize,
                    },
                    async: false,
                    success: function (result) {
                        boolean=result.ret;
                        if (boolean) {
                            SPUItem = result.data;
                            SPUTotal = result.count;
                        }
                    }
                });
                if(boolean){
                    this.SPUItem = SPUItem;
                    this.SPUTotal = SPUTotal;
                }else{
                    this.$message.error('请求异常');
                }

            }
        },
    })
</script>
</body>

</html>